@red:red;
.index-container {
  color:red;
  background: #FAFAFA;
  padding-top: 10px;
   .container-top{
     background:#ffffff ;
     height: 140px;
     width: 100%;
     position: relative;



     &.wrap-fixed {
       position: fixed;
       z-index: 10000;
       top: 0;
       left: 0;
       height: 60px;
       border-bottom: 1px solid #E5E5E5;
       box-shadow: 2px 2px 5px #e5e5e5;
       >.cup-desc {
         width: 1190px;
         margin: 0 auto;
         position: relative;
         .all-code {
           display: none;
         }
         .left-logo {
           padding-top: 12px;
           padding-left: 0;
         }
         .keyword {
           display: none;
         }
         .right-search {
           top: 9px;
           .search-tab {
             position: absolute;
             width: 80px;
             background: #fafafa;
             z-index: 100;
             border-top-left-radius: 20px;
             border-bottom-left-radius: 20px;
             margin-top: 2px;
             margin-left: 2px;
             .search-tab-header {
               ul {
                 li {
                   background-image: none;
                   filter: none;
                   color: #666;
                   font-size: 14px;
                   line-height: 38px;
                   position: relative;
                   &:first-child {
                     &:after {
                       position: absolute;
                       content: '';
                       width: 5px;
                       height: 3px;
                       background-image: url(../image/sprite.png);
                       background-position: -239px -169px;
                       top: 18px;
                       right: -15px;
                     }
                   }
                   &:nth-child(2) {
                     display: none;
                   }
                 }
               }
             }
             &:hover {
               border-bottom-left-radius: 0;
               .search-tab-header {
                 ul {
                   li {
                     display: block;
                   }
                 }
               }
             }
           }
           .panel {
             input {
               padding-left: 90px;
               width: 500px;
             }
           }
           .search-button {
             top: 0;
           }
         }
       }
     }
     .left-logo{
       width:204px;
       height: 36px;
       padding-top:58px;
       padding-left: 10px;
       img{
         width:204px;
         height: 36px;
       }
     }
     .right-search{
       position:absolute;
       left:255px;
       top:33px;
       width: 630px;
       ul{
         margin-left: 12px;
       }
       .panel{
         border:2px solid #FF4701;
         border-radius:20px;
         height: 34px;
         padding:4px 0 0 11px;
         position: relative;
         .icon {
           position: absolute;
           left: 15px;
           top: 14px;
         }
       }
       .search-button{
         position: absolute;
         right: -1px;
         top:25px;
         width:80px;
         .btn-search{
           display: block;
           text-align: center;
           line-height: 42px;
           font-size: 18px;
           font-weight: bold;
           color: #ffffff;
           filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradientType=1); BACKGROUND-REPEAT: repeat-x;
           background-image: linear-gradient(to right,#ff9000 0,#ff5000 100%);
           cursor: pointer;
           border: none;
           border-top-right-radius:20px;
           border-bottom-right-radius:20px;
           width: 100%;
         }
       }
      .input{
        width:571px;
        border-radius: 20px;
        border: none;
        height: 30px;
        padding-left: 22px;
        padding-right: 22px;
        line-height: 10px;
      }
      .search-tab{
        .search-tab-header{
          height: 25px;
        }
        li{
          float: left;
          margin-left: 5px;
          line-height: 25px;
          width: 36px;
          color:#FF4701;
          font-size: 12px;
          cursor: pointer;
          text-align: center;
          border-top-left-radius: 6px;
          border-top-right-radius: 6px;
        }
        .active-tab{
          color:#ffffff;
          filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradientType=1); BACKGROUND-REPEAT: repeat-x;
          background-image: linear-gradient(to right,#ff9000 0,#FF4701 100%);
        }
      }
      .keyword{
        overflow: hidden;
        max-height: 25px;
        ul {
          margin-left: 0;
        }
        ul li{
          font-size: 12px;
          margin-right: 8px;
          float: left;
          a {
            color: #666666;
          }
        }
        li {
          margin-top: 6px;
        }
        .keyword-active{
          a{
            font-size: 12px;
            color: #FF5001;
          }
        }
      }
    }
    .all-code{
      position: absolute;
      right:80px;
      bottom: 16px;
      display: none;
      .left-code{
        margin-left: 30px;
        float: left;
        text-align: center;
        position: relative;
        .close{
          display: inline-block;
          border: 1px solid #e5e5e5;
          width: 16px;
          line-height: 16px;
          text-align: center;
          cursor: pointer;
          position: absolute;
          top: 0;
          left: -17px;
          color: #EEEEEE;
        }
        .code-cont {
          border: 1px solid #e5e5e5;
          padding: 5px;
          >p {
            font-size: 10px;
            color: #FF5001;
          }
          img{
            width: 72px;
            height: 72px;
          }
        }
      }
    }

  }
  .container-center{
    margin: 10px auto;
    height:490px ;
    width:100%;
    //background:  #E5E5E5;
    .main{
      float:left;

      .main-left{
        position: relative;
        float: left;
        width: 190px;
        background: #1a1a1a;
        .main-left-inner{
          border: 1px solid #FF5001;
          height: 488px;
          position: relative;
          font-size: 14px;
          width: 188px;
          background: #ffffff;
          z-index:999;
          .main-left-inner-bd{
            border-top:none;
            padding-top: 9px;
            padding-bottom:3px;
            li{
              overflow: hidden;
              line-height: 30px;
              height: 30px;
              padding-left: 15px;
              padding-right: 19px;
              font-size:14px;
              color:#666;
              position: relative;
              a {
                color:#666;
                font-weight: normal;
              }
              &:hover{
                background: #FFE4DC;
                color:#FF4401 !important;

                .main-left-hidden{
                  display: block;

                }
                >a{
                  color:#FF4401;
                }

              }
              .icon-black-arrow{
                position: absolute;
                top:12px;
                right: 10px;
              }

            }
          }
          .block{
            display: inline-block;
          }
          .main-left-hidden{
            display: none;
            position: absolute;
            border: 1px solid #FF4401;
            width: 280px;
            float:left;
            left: 188px;
            top:0;
            margin-top: -1px;
            padding:0 0 0 20px;
            background: #ffffff;
            -webkit-transition: all .2s;
            -moz-transition: all .2s;
            -o-transition: all .2s;
            transition: all .2s;
            transform:translateZ(0);
            .hidden-inner{
              font-size: 12px;
              margin-bottom: 5px;
              h5{
                position:relative;
                height: 22px;
                line-height: 22px;
                margin-top: 20px;
                font-size: 16px;
                color: #333;
              }
              p{
                overflow: hidden;
                padding-right: 22px;
                line-height: 26px;
                margin-top: 10px;
                a{
                  display: inline-block;
                  margin-right: 12px;
                  height: 30px;
                  line-height: 30px;
                  white-space: nowrap;
                  font-size: 12px;
                  color: #666666;
                }
                .hot-color{
                  color:#FF4401;
                }
              }
            }
          }
        }
      }
      .main-right{
        float: left;
        width:650px;
        height: 490px;
        margin-left: 10px;
        .banner-container{
          clear:both;
          width: 490px;
          height: 280px;
          overflow:hidden;
          float: left;
          position: relative;
          ul {
            position: relative;
            width:100%;
            height: 100%;
            overflow: hidden;
            li {
              display: none;
              position: absolute;
              top:0;
              left: 0;
              width: 100%;
              height: 100%;
              text-align: center;
              img {
                position: absolute;
                top:0;
                left: 0;
                width: 100%;
                height: 100%;
              }
              &:first-child {
                display: block;
              }
            }
          }
          .cur {
            position:absolute;
            bottom:14px;
            text-align: center;
            width: 100%;
            height: 14px;
            line-height: 14px;
            .circle-bg {
              display: inline-block;
              -webkit-border-radius: 10px;
              -moz-border-radius: 10px;
              border-radius: 10px;
              background: rgba(255,255,255,0.2);
              >span {
                display: inline-block;
                width: 8px;
                height: 8px;
                background:#fff;
                margin: 0 5px;
                -webkit-border-radius:100%;
                -moz-border-radius:100%;
                border-radius:100%;
                &.active {
                  background: #FF5001;
                }
              }
            }
          }
        }
        .right-mod-image{
          width:150px;
          height: 280px;
          float: left;
          margin-left: 10px;
          background: #000;
          img{
            width:150px;
            height: 280px;
            -webkit-transition: all .2s;
            -moz-transition: all .2s;
            -o-transition: all .2s;
            transition: all .2s;
            &:hover{
              opacity: 0.8;
            }
          }
        }
        .right-ad{
          width:490px;
          //background: #ff4e41;
          float: left;
          margin-top: 10px;
          .h-200{
            height: 200px;
            width: 172px;
            -webkit-transition: all .2s;
            -moz-transition: all .2s;
            -o-transition: all .2s;
            transition: all .2s;
            background: #000000;
           img{
             &:hover{
               opacity: 0.8;

             }
           }
          }
          .h-100{
            height: 100px;
            width: 172px;
            -webkit-transition: all .2s;
            -moz-transition: all .2s;
            -o-transition: all .2s;
            transition: all .2s;

            &:hover{
              opacity: 0.8;
            }
          }
          .bt-1{
            border-top: 1px solid #e5e5e5;
          }

          div{
            width: 162px;
            display: inline-block;
            float: left;
            border-right: 1px solid #E5E5E5;
          }
          p{
            background: #000000;
            width: 172px;
            display: inline-block;
            float: left;
          }
          .last-image{
            width: 144px;
            display: inline-block;
            float: left;
            img{
              width:144px;
              height: 100px;
              border-left: 1px solid #e5e5e5;
              -webkit-transition: all .2s;
              -moz-transition: all .2s;
              -o-transition: all .2s;
              transition: all .2s;
              &:hover{
                opacity: 0.8;
                background: #000000;
              }
            }
          }

        }
        .ad-image{
          margin-top: 10px;
          width: 150px;
          display: inline-block;
          float: left;
          margin-left: 10px;
          background: #000000;
          img{
            width:150px;
            height: 200px;
            border:none;
            -webkit-transition: all .2s;
            -moz-transition: all .2s;
            -o-transition: all .2s;
            transition: all .2s;
            &:hover{
              opacity: 0.8;

            }
          }
        }
      }

    }
    .main-detail{
      width:330px;
      height: 490px;
      background: #ffffff;
      float: left;
      margin-left: 10px;
      .member{
        height: 165px;
        background-image: url("../image/background.png");
        background-repeat: no-repeat;
        background-size: contain;
        .member-bd{
          position: relative;
          height: 165px;
          .avatar{
            margin: 0px auto;
            display: block;
            height: 120px;
            width: 74px;
            text-align: center;
            .member-home{
              margin-top: 10px;
              display: inline-block;
              border:3px solid #fff;
              -webkit-border-radius: 50%;
              -webkit-background-clip: padding-box;
              -moz-border-radius: 50%;
              -moz-background-clip: padding;
              background-clip:padding-box;
              border-radius:50%;
              width: 60px;
              height: 60px;
              line-height: 50px;
              overflow: hidden;

              img{
                width:60px;
                height: 60px;
              }

            }
            .ml-5{
              font-size: 12px;
              color: #666666;
            }
            .login-ml-5{
              font-size: 12px;
              color: #3C3C3C;
            }
            .login-gold{
              margin-left: 8px ;
              margin-top: 3px;
              font-size: 12px;
              color: #FF5001;
            }

          }
          .login-btn{
            display: block;
            text-align: center;
            line-height: 30px;
            font-size: 14px;
            font-weight: bold;
            color: #ffffff;
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradientType=1); BACKGROUND-REPEAT: repeat-x;
            background-image: linear-gradient(to right,#ff9000 0,#ff5000 100%);
            cursor: pointer;
            height: 30px;
            border: none;
            border-radius: 10px;
            width: 80px;
            margin:0px auto;
          }

          .login-status{
            border-top: 1px solid #FFDDCE;
            float: left;
            height: 40px;
            line-height: 20px;
            margin-top: 4px;

            ul li{
              text-align: center;
              width:82px;
              height: 40px;
              line-height: 20px;
              float: left;
              font-size: 12px;
              color: #666666;
              a{
                font-size: 14px;
                color: #FF5001;
              }
            }
          }

        }
      }
      .link-nine{
        width: 100%;
        .third-link{
          height: 26px;
          line-height: 26px;
          width:100%;
          background: #FFE4DD;
          color:#FF5001;
          text-align: center;
          font-size: 12px;
        }
        li{
          float: left;
          width:109px;
          height: 98px;
          text-align: center;
          margin: 0 auto;
          border: 1px solid #e5e5e5;
          border-top:none;
          border-left:none;
          &:nth-child(3n+0){
            border-right: none;
          }
          &:nth-child(7), &:nth-child(8), &:nth-child(9){
            border-bottom: none;
          }
          a{
            display: inline-block;
            width: 110px;
            height: 99px;
            line-height: 65px;
            img{
              width: 40px;
              height: 40px;
            }
          }
        }
      }
    }
  }
  .container-bottom{
    margin-top: 10px;
    height:100% ;
    width:100%;
    .change-list{
      height: 490px;
      width:100%;

      .change-left-list{
        height: 100%;
        background: #ffffff;
        float: left;
        .change-left-header{
          height: 45px;
          line-height: 36px;
          img{
            float: left;
            margin-left: 10px;
            -webkit-transition: all .2s;
            -moz-transition: all .2s;
            -o-transition: all .2s;
            transition: all .2s;
            &:hover{
              opacity: 0.8;
            }
          }
          .header-detail{
            font-size: 12px;
            color: #9C9C9C;
            letter-spacing: 0;
            float: left;
            margin-top: 5px;
          }
          .header-replace{
            float: right;
            font-size: 14px;
            color: #666666;
            letter-spacing: 0;
            padding-top: 5px;
            padding-right: 10px;
          }
        }
        .change-left-inner{
          height: 435px;
          .inner-bd-left{
            width:530px;
            height: 435px;
            float: left;
            .w-h-250{
              width: 250px;
              height: 250px;
            }
            .w-h-164{
              width: 164px;
              height: 164px;
            }
            div{
              margin-top: 10px;
              margin-left: 10px;
              background: #000;
            }
            img{

              -webkit-transition: all .2s;
              -moz-transition: all .2s;
              -o-transition: all .2s;
              transition: all .2s;
              &:hover{
                opacity: 0.8;
                background: #000000;
              }
            }
            a{
              float: left;
            }
          }
          .inner-bd-right{
            width:320px;
            height: 435px;
            float: left;
            .w-150{
              width: 150px;
              height: 206px;
            }
            div{
              margin-top: 10px;
              background: #000;

            }
            a{
              float: left;
              img{
                -webkit-transition: all .2s;
                -moz-transition: all .2s;
                -o-transition: all .2s;
                transition: all .2s;
                &:hover{
                  opacity: 0.8;
                  background: #000000;
                }
              }
              &:nth-child(even){
                margin-left: 10px;
              }
            }

          }
        }
      }
      .change-right-list{
        width:330px;
        height: 100%;
        float: right;
        text-align: center;
        background: #ffffff;
        .change-right-header{
          text-align: left;
          margin-left: 10px;
          .header-replace{
            font-size: 14px;
            color: #666666;
            letter-spacing: 0;
            float: right;
            padding-top: 12px;
            padding-right: 10px;
          }
        }

        .change-right-inner{
          div{
            margin: 10px 10px 0 10px;
            overflow: hidden;
            background: #000000;
          }
          img{
            width: 310px;
            height: 100px;

            -webkit-transition: all .2s;
            -moz-transition: all .2s;
            -o-transition: all .2s;
            transition: all .2s;
            &:hover{
              opacity: 0.8;

            }
          }
        }
      }
    }
    .guess-like{
      font-size: 16px;
      color: #666666;
      letter-spacing: 0;
      text-align: center;
      margin: auto;
      height:80px ;
      line-height: 80px;
      width: 100%;

      .guess-all{
        margin-right: 70px;
        .line-left{
          position: relative;
          top:40px;
          left:490px;
          width:50px;
          display: inline-block;
          float: left;
          background: #979797;
          height: 1px;
        }
        .line-right{
          position: relative;
          top:-40px;
          right:445px;
          width: 50px;
          display: inline-block;
          float: right;
          background: #979797;
          height: 1px;
        }
      }

    }
    .favorite-list{
      margin-left: -10px;
      margin-top: -10px;
      li{
        float: left;
        width: 228px;
        height: 308px;
        text-align: center;
        background: #ffffff;
        margin-left: 10px;
        margin-top: 10px;
        border: 1px solid #fff;
        &:hover{
          border: 1px solid #FF5001;

          .favorite-detail{
            color: #FF5001 !important;
          }
        }
        img{
          width: 170px;
          height: 170px;
          padding-top: 30px;

        }
        .favorite-detail{
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          margin-top: 50px;
          font-size: 14px;
          color: #666666;
          letter-spacing: 0;
          padding: 0 30px;
        }
        .favorite-count{
          font-size: 14px;
          color: #FF5001;
          letter-spacing: 0;
        }
      }
    }
  }
}
.warn-wrap {
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10000;
  -webkit-overflow-scrolling: touch;
  outline: 0;
  background: rgba(0,0,0,.5);
  text-align: center;
  display: none;
  .center {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -250px;
    margin-top: -330px;
    img {
      width: 500px;
      height: 660px;
    }
    .iconfont {
      position: absolute;
      font-size: 40px;
      color: #fff;
      top: -35px;
      right: -10px;
      font-style: normal;
    }
  }
}